<template>
	<view class="column-css">
		<view class="column-css" style="background: #FFFFFF;">
			<!-- <uni-steps
				style="padding-top: 40rpx;"
				activeColor="#2979FF"
				:options="[{ title: '录入个人信息' }, { title: '录入车辆信息' }, { title: '录入收款信息' }]"
				:active="2"
			></uni-steps> -->
			<view class="column-css view-cente">
				<view class="row-css view-cente-cle">
					<view class="view-cente-cle-text">收款人</view>
					<label style="display: flex;align-items: center;" @click="onischeck()">
						<radio style="transform: scale(0.8);z-index: 1;" :checked="ischeck" />
						使用本人信息
					</label>
				</view>
			</view>
			<view class="column-css view-cente">
				<view class="row-css view-cente-cle">
					<view class="view-cente-cle-text">
						姓名
						<text style="color: #F36363;">*</text>
					</view>
					<input style="z-index: 1;" v-model="payeeinfo.name" placeholder="请输入姓名" value="" />
				</view>
			</view>
			<view class="column-css view-cente">
				<view class="row-css view-cente-cle">
					<view class="view-cente-cle-text">
						手机号
						<text style="color: #F36363;">*</text>
					</view>
					<input style="z-index: 1;" v-model="payeeinfo.mobile" placeholder="请输入手机号" value="" />
				</view>
			</view>
			<view class="column-css view-cente">
				<view class="row-css view-cente-cle">
					<view class="view-cente-cle-text">
						身份证
						<text style="color: #F36363;">*</text>
					</view>
					<input style="flex: 1;z-index: 1;" v-model="payeeinfo.idcard" placeholder="请输入身份证" value="" />
				</view>
			</view>
			<view class="column-css view-cente">
				<view class="row-css view-cente-cle">
					<view class="view-cente-cle-text">
						收款账号
						<text style="color: #F36363;">*</text>
					</view>
					<input style="flex: 1;z-index: 1;" v-model="payeeinfo.accountNum" placeholder="请输入收款账号" value="" />
				</view>
			</view>
			<view class="column-css view-cente">
				<view class="row-css view-cente-cle">
					<view class="view-cente-cle-text">
						收款银行
						<text style="color: #F36363;">*</text>
					</view>
					<view style="position: relative;flex: 1;margin-top: -5rpx;z-index: 999;">
						<input v-model="payeeinfo.bankName" @input="search($event)" placeholder="请输入收款银行" />
						<view class="ul">
							<view class="li" v-for="(item, index) in list" :key="index" @click="select(item)">{{ item.name }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="view-button" @click="onnext()">提交</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			ischeck: false,
			userInfo: {},
			payeeinfo: {
				// bankName: '中国银行',
				// payee2Bank: '中国银行'
			},
			bankitems: [
				// {
				// 	id: '1',
				// 	name: '中国银行'
				// },
				// {
				// 	id: '2',
				// 	name: '建设银行'
				// },
				// {
				// 	id: '3',
				// 	name: '招商银行'
				// },
				// {
				// 	id: '4',
				// 	name: '农业银行'
				// },
				// {
				// 	id: '5',
				// 	name: '工商银行'
				// }
			],
			list: []
		};
	},
	methods: {
		search(e) {
			let val = e.detail.value;
			let { bankitems } = this;
			let arr = [];
			for (let i = 0; i < bankitems.length; i++) {
				if (bankitems[i].name.indexOf(val) !== -1) {
					arr.push(bankitems[i]);
				}
			}
			if (!val) {
				this.list = [];
			} else {
				this.list = arr;
			}
		},
		select(item) {
			this.payeeinfo.bankName = item.name;
			this.list = [];
		},
		onnext() {
			var reg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
			var regIdno = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
			var regbankcard = /^([1-9]{1})(\d{15}|\d{18})$/;
			if (this.payeeinfo.name && this.payeeinfo.mobile && this.payeeinfo.idcard && this.payeeinfo.accountNum && this.payeeinfo.bankName) {
				let text = '请输入正确的';
				if (!reg.test(this.payeeinfo.mobile)) {
					text += '手机号 ';
				}
				if (!regIdno.test(this.payeeinfo.idcard)) {
					text += '身份证 ';
				}
				if (!regbankcard.test(this.payeeinfo.accountNum)) {
					text += '银行卡账号';
				}
				if (!reg.test(this.payeeinfo.mobile) || !regIdno.test(this.payeeinfo.idcard) || !regbankcard.test(this.payeeinfo.accountNum)) {
					uni.showToast({
						title: text,
						icon: 'none'
					});
					return;
				}
			} else {
				uni.showToast({
					title: '请完善信息！',
					icon: 'none'
				});
				return;
			}
			this.payeeinfo.driverId = this.userInfo.driverId;
			this.wxRequest({
				url: `${this.API}/driverService/addDriverPay`,
				method: 'POST',
				data: this.payeeinfo,
				title: '添加中...',
				success: res => {
					uni.navigateBack({
					    delta: 1
					});
				}
			});
		},
		onischeck: function() {
			if (this.ischeck) {
				this.ischeck = !this.ischeck;
				this.payeeinfo.name = '';
				this.payeeinfo.mobile = '';
				this.payeeinfo.idcard = '';
			} else {
				this.ischeck = !this.ischeck;
				this.payeeinfo.name = this.userInfo.driverName;
				this.payeeinfo.mobile = this.userInfo.mobile;
				this.payeeinfo.idcard = this.userInfo.idcard;
			}
		}
	},
	onLoad: function() {
		this.userInfo = uni.getStorageSync(this.DATA_KEY.userInfo);
		// this.wxRequest({
		// 	url: `${this.API}/driverService/queryDic`,
		// 	method: 'POST',
		// 	data: ['']
		// 	success: res => {
		// 		this.bankitems = res.data.data;
		// 	}
		// });
	}
};
</script>

<style>
/* page {
	background: #ffffff;
} */
.row-css {
	display: flex;
	flex-direction: row;
}

.column-css {
	display: flex;
	flex-direction: column;
}
.view-cente {
	background: #ffffff;
	padding: 0 30rpx;
}
.view-cente-cle {
	padding: 25rpx 0;
	border-bottom: 1rpx solid #eeeeee;
}
.view-cente-cle-text {
	width: 180rpx;
	color: #5f6579;
}
.view-button {
	display: flex;
	flex: 1;
	background: #2b7cff;
	border-radius: 5rpx;
	padding: 20rpx;
	margin: 30rpx;
	margin-top: 50rpx;
	justify-content: center;
	color: #ffffff;
}
.ul {
	position: absolute;
	margin-top: 30rpx;
	left: 0;
	top: 100%;
	width: 100%;
	background: #ffffff;
}
.li {
	border-bottom: 1rpx solid #eeeeee;
	padding: 25rpx 20rpx;
	background: #ffffff;
}
</style>
